<template>
  <div>
    <div class="container">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>订单状态:</span>
            <el-select v-model="status" placeholder="请选择" @change="statusChange">
              <el-option
                v-for="item in orderStatusList"
                :key="item.dictKey"
                :label="item.dictText"
                :value="item.dictKey">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-input v-model="query.idcard" placeholder="身份证" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          </div>
        </el-col>
      </el-row>

      <!--      <div class="handle-box">-->
      <!--        -->
      <!--      </div>-->
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="roomId" label="房间ID" width="55" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="55" align="center"></el-table-column>
        <el-table-column prop="checkinTime" label="入住时间"></el-table-column>
        <el-table-column prop="checkoutTime" label="退房时间"></el-table-column>
        <el-table-column prop="price" label="价格(元)"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">

            <span v-if="scope.row.status==0">未付款</span>
            <span v-if="scope.row.status==1">已付款</span>
            <span v-if="scope.row.status==2">已结束</span>
            <span v-if="scope.row.status==3">待评价</span>
          </template>
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-folder"
              @click="HandleSelect(scope.row)"
            >查看详情
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="OrderUpdate(scope.$index,scope.row)"
            >编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-folder"
              @click="Orderdelete(scope.$index,scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="size"
          @current-change="getData">
        </el-pagination>
      </div>
    </div>

    <!--        查询-->
    <el-dialog title="详细信息" :modal="false" :visible.sync="selectVisible" width="70%">
      <el-table :data="tableData">
        <el-table-column property="id" label="ID" width="150"></el-table-column>
        <el-table-column property="roomNumber" label="房间号" width="200"></el-table-column>
        <el-table-column property="hotelName" label="酒店名称" width="200"></el-table-column>
        <el-table-column property="floorName" label="楼层名称" width="200"></el-table-column>
        <el-table-column property="cityName" label="所属城市" width="200"></el-table-column>
        <el-table-column property="roomTypeName" label="房间类型" width="200"></el-table-column>
<!--        <el-table-column property="imageList" label="房型浏览图">-->
<!--          <template width="90" slot-scope="scope">-->

<!--            <img  :src="scope.row.serviceimg">-->

<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <!--      <el-form-item label="房型流览图" >-->
      <!--        <br>-->
      <!--        <el-row>-->
      <!--          <el-col :span="8"  v-for="(pic, index) in imageList">-->
      <!--            <el-card :body-style="{ padding: '0px' }">-->
      <!--              <img :src="pic.image" class="image">-->
      <!--              <div style="padding: 14px;">-->
      <!--                &lt;!&ndash;                  <div class="bottom clearfix">&ndash;&gt;-->
      <!--                &lt;!&ndash;                    <el-button type="text" @click="removePic(pic.imageId)" class="button">删 除</el-button>&ndash;&gt;-->
      <!--                &lt;!&ndash;                  </div>&ndash;&gt;-->
      <!--              </div>-->
      <!--            </el-card>-->
      <!--          </el-col>-->
      <!--        </el-row>-->
      <!--      </el-form-item>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectVisible = false">关闭</el-button>
      </span>
    </el-dialog>


    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :modal="false" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px" :rules="rules">
        <el-form-item label="订单ID" prop="id">
          <el-input v-model="form.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="房间ID" prop="roomId">
          <el-input v-model="form.roomId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="未付款" value="0"></el-option>
            <el-option label="已付款" value="1"></el-option>
            <el-option label="已结束" value="2"></el-option>
            <el-option label="待评价" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!--        </template>-->

        <!--        <el-form-item label="权限:" :label-width="formLabelWidth" prop="roleId">-->
        <!--          <el-select v-model="form.userId" autocomplete="off">-->
        <!--            <el-option label="管理员" value="1"></el-option>-->
        <!--            <el-option label="用户" value="2"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit('form')">确 定</el-button>
      </span>
    </el-dialog>

    <!--    <el-dialog title="编辑" :modal="false" :visible.sync="editVisible" width="30%">-->
    <!--      <el-form ref="form" :model="form" label-width="70px" :rules="rules">-->
    <!--        <el-form-item label="用户名" prop="roleName">-->
    <!--          <el-input v-model="form.roleName"></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="editVisible = false">取 消</el-button>-->
    <!--        <el-button type="primary" @click="saveEdit('form')">确 定</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
  </div>

</template>

<script>
  import { orderList } from '../../network/orderList'
  import { updateOrder } from '../../network/updateOrder'
  import { orderdelete } from '../../network/orderDelete'
  import { searchOrder } from '../../network/searchOrder'
  import { orderView } from '../../network/orderView'

  export default {
    name: 'OrderManage',
    data () {
      return {
        rules: {
          id: [{
            required: true,
            message: '角色ID',
            trigger: 'blur',
          }],
          roomId: [{
            required: true,
            message: '房间ID',
            trigger: 'blur',
          }],
          userId: [{
            required: true,
            message: '用户ID',
            trigger: 'blur',
          }],
          status: [{
            required: true,
            message: '状态',
            trigger: 'blur',
          }],
        },

        // 查询的相关参数
        query: {
          idcard: '',
          pageIndex: 1, // 当前请求页
          size: 5, // 一页显示的数据条数
        },

        imageList: [],
        tableData: [], // 获取的数据
        // multipleSelection: [],
        editVisible: false, // 编辑弹出框false隐藏，true显示
        selectVisible: false,
        viewVisible: false, // 新建弹出框false隐藏，true显示
        addVisible: false,
        form: {},
        total: 0,
        size: 10,
        currentPage: 1,
        idx: -1,
        id: 1,
        status: '',
        orderStatusList: [],
        checkinTime: '',
        checkoutTime: '',
        statusKey: '',
        payTime: '',
        createTime: '',
        roleId: '',
        userId: '',
        // size: 10,
        // current: 1,
        // idx: -1,
        // id: -1,
        // dialogVisible: false,
      }
    },
    created () {
      this.getData()

      // _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/listByDictName?status=hotelRoomStatus').then(function (res) {
      //   if(res.data.code==80200){
      //     _this.roomStatusList = res.data.data;
      //   }
      // })

    },
    methods: {
      // 初始化数据
      getData (currentPage) {
        console.log('表单')
        orderList(currentPage)
          .then((res) => {
            console.log(res)
            if (res.data.code === 80200) {
              console.log(res)
              this.tableData = res.data.data.records
              this.tableData.forEach(item => {
                item.status = Boolean(item.status)
              })

              this.total = res.data.data.total
              this.size = res.data.data.size
              this.current = res.data.data.current
            } else {
              this.$message.error('数据获取失败，' + res.data.data.msg)
            }
          })
          .catch(() => {
            this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确')
          })
      },

      OrderUpdate (index, row) {
        this.idx = index
        this.form = row
        this.editVisible = true
      },
      // 保存新建
      saveEdit (form) {
        console.log('添加')
        console.log(this.form)
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.editVisible = false
            let formData = new FormData()
            formData.append('id', this.form.id)
            formData.append('userId', this.form.userId)
            formData.append('roomId', this.form.roomId)
            formData.append('status', this.form.status)
            updateOrder(formData)
              .then((res) => {
                console.log(res)
                if (res.data.code === 80200) {
                  this.$message.success('编辑成功')
                  this.getData()
                } else {
                  this.$message.error('编辑失败')
                  this.getData()
                }
                this.editVisible = false
              })
              .catch(() => {
                this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确')
              })
          } else {
            this.$message.error('请按照指定格式输入')
            return false
          }
        })
      },

      // 删除操作
      Orderdelete (index, row) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning',
        }).then(() => {
          orderdelete(row.id).then((res) => {
            // alert(row.id);
            console.log(res)
            if (res.data.code === 80200) {
              this.$message.success('删除成功')
              // this.tableData.splice(index, 1);
              this.getData()
            } else {
              this.$message.error('删除失败')
              this.getData()
            }
          })
        })
      },
      statusChange (val) {
        this.statusKey = val
        this.searchOrder(1)
      },
      searchOrder (currentPage) {
        var vo = new URLSearchParams()
        vo.append('currentPage', currentPage)
        vo.append('status', this.statusKey)
        vo.append('userId', this.userId)
        vo.append('roomId', this.roomId)
        vo.append('checkinTime', this.checkinTime)
        vo.append('checkoutTime', this.checkoutTime)
        vo.append('payTime', this.payTime)
        vo.append('creatTime', this.createTime)
        var _this = this
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/order/search', vo).then(function (res) {
          if (res.data.code == 80200) {
            _this.roomList = res.data.data.records
            _this.total = res.data.data.total
            _this.pages = res.data.data.pages
            _this.size = res.data.data.size
            _this.currentPage = res.data.data.current
            console.log(res)
          } else {
            alert(res.data.msg)
          }
        })
      },

      handleSearch () {
        if (this.query.idcard == '') {
          this.getData()
        } else {
          // this.getData();
          console.log('表单')
          searchOrder(this.query.idcard)
            .then((res) => {
              console.log(res)
              if (res.data.code === 80200) {
                console.log(res)
                this.tableData = res.data.data.records
                this.tableData.forEach(item => {
                  item.status = Boolean(item.status)
                })
                this.size = res.data.data.size
                this.total = res.data.data.total
              } else {
                this.$message.error('数据获取失败，' + res.msg)
              }
            })
            .catch(() => {
              this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确')
            })
        }
      },
      // 查询操作
      HandleSelect (row) {
        this.selectVisible = true
        let formData = new FormData
        formData.append('id', row.id)
        console.log(row.id)
        orderView(formData).then((res) => {
          console.log(res)
          if (res.data.code === 80200) {
            this.tableData = []
            this.tableData.push(res.data.data)
            //this.tableData.splice(index, 1);

          } else {
            this.$message.error('查询失败')
            this.getData()
          }
        })
      },
      // alert('查询操作');
    },
    view () {

    },
    // 分页导航
    handlePageChange (val) {
      alert('请求的页数：' + val)

      // 调用方法：this.$set( target, key, value )
      // target：要更改的数据源(可以是对象或者数组)
      // key：要更改的具体数据
      // value ：重新赋的值
      this.$set(this.query, 'pageIndex', val)
      this.getData(val)
    },

    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },

  }

</script>

<style scoped>

</style>
